<template>
  <div class="service">
    
    <div class="newcharge">
    <div class="charge-title"> 
      <i class="el-icon-arrow-left" @click=toPage()></i>
      <span class=jiaofei-text> 我的订单 </span>
    </div>
    <div class="title">
      <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="全部订单" name="fourth">
           <div class="orders" v-for="item in orderslist" :key="item" >
             <div class="ordersnumber"><span><strong>订单号：</strong>{{ item.ordernumber}}</span></div>
             <div class="orderdetails"><img :src="item.imgsrc">
             <div >
               <span style="font-size:15px"><strong >{{item.ordernname}}</strong ><br>维修地点：{{ item.orderaddress}}</span><br>
               <span>合计：<span style="color:red">{{ item.ordermoney}}</span></span>
             </div>
             </div>
           </div>
           
           </el-tab-pane>
        <el-tab-pane label="待接单" name="first">
           <div class="orders">
             <div class="ordersnumber"><span><strong>订单号：</strong>78234892740213</span></div>
             <div class="orderdetails"><img src="./img/洗衣机.jpg">
             <div >
               <span style="font-size:15px"><strong >家电维修</strong ><br>维修地点：金凤路18号</span><br>
               <span>合计：<span style="color:red">未接单</span></span>
             </div>
             </div>
           </div>
        </el-tab-pane>
        <el-tab-pane label="待上门" name="second">
           <div class="orders">
             <div class="ordersnumber"><span><strong>订单号：</strong>78234892740213</span></div>
             <div class="orderdetails"><img src="./img/空调.jpg">
             <div >
               <span style="font-size:15px"><strong>家电维修</strong ><br>维修地点：金凤路18号</span><br>
               <span>合计：<span style="color:red">120.00元</span></span>
             </div>
             </div>
           </div>
        </el-tab-pane>
        <el-tab-pane label="待评价" name="third">
           <div class="orders">
             <div class="ordersnumber"><span><strong>订单号：</strong>78234892740213</span></div>
             <div class="orderdetails"><img src="./img/洗衣机.jpg">
             <div >
               <span style="font-size:15px"><strong >管道维修</strong ><br>维修地点：金凤路18号</span><br>
               <span>合计：<span style="color:red">60.00元</span></span>
             </div>
             </div>
           </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  </div>
  

</template>

<script>
import axios from 'axios'
export default {
  name: 'MyOrder',
  
  mounted(){
    this.add();
  },
  data(){
    
    return{
      activeName: 'fourth',
      orderslist:null,
    }
  },
  methods: {
      toPage(text){
       this.selectcharge=text;
       console.log(this.selectcharge);
       this.$router.push({
      path: '/Services'
    })
    },
    async add(){
      await axios.get('http://localhost:8080/data/orderlist.json').then((response)=>
      {
        if(response.data.data.success==200){
           this.orderslist = response.data.data.orderslist;
           console.log('111');
        }
        else(
          alert('数据获取失败')
        )
      }
      )
    }
   
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  img{
    width:75px;
    height:75px;
    margin-right:20px;
  }
  .orders{
    height:110px;
    width:295px;
    background-color: whitesmoke;
    padding:15px;
    border-radius: 10px;
    box-shadow: 0 2px 20px rgba(222, 220, 220, 0.2)inset;
    margin-bottom:10px;
    margin-left:10px;
  }
  .orderdetails{
    display: flex;
    margin-top:10px;
  
  }
  .el-icon-arrow-left{
    font-size:18px;
    margin-top:27px;
    font-weight: bold;
    margin-left:25px;
  }
  .title{
      height:40px;
      width:305px;
      margin-left:20px;
      margin-top: 20px;
  }
  .jiaofei-text{
   width:100px;
   margin-left:123px;
 }
  
 
</style>
